<template>
  <div>
    <div class="mb-4">
      <el-button @click="drawer = true">添加分类</el-button>
      <p></p>
 
    </div>
    <!-- 
    :data: 表格数据
    :stripe: 是否开启斑马纹
    :style="{ width: '100%' }" 表格样式
    prop="prop" 表示要显示的列
    lable   表示要显示的列名
     -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="category_name" label="分类标题" width="180" />
      <el-table-column prop="category_alias" label="分类缩写" width="180" />
      <el-table-column prop="create_time" label="创建时间" />
      <!-- 
       min-width: 120px 表示最小宽度为120px
       label 表示要显示的列名
       -->
      <el-table-column label="操作" min-width="120">
        <!-- 
        #default: 表示要显示的列内容
        :scope: 表示当前行的数据
         -->
        <template #default="scope">
          <!-- 
          link  表示点击之后不会跳转页面
          type: 表示按钮类型
          size: 表示按钮大小
          @click: 点击事件
           -->
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteRow(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="dakaibianji(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
    :current-page: 当前页码
    :page-size: 每页条数
    :page-sizes: 每页条数选项
    layout: 表示显示的内容
    :total: 总页数
    @size-change: 每页条数改变事件
    @current-change: 当前页码改变事件
     -->
    <el-pagination
      :current-page="page.pageNum"
      :page-size="page.pageSize"
      :page-sizes="[100, 200, 300, 400]"
      layout="total,  prev, pager, next, jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

     <!-- 添加抽屉 -->
     <!-- 
     v-moderl  实现双向绑定 来实现抽屉的打开关闭
     direction: 表示抽屉的方向
     title: 表示抽屉的标题
     before-close: 表示关闭之前执行的函数
      -->
    <el-drawer
      v-model="drawer"
      title="添加分类"
      :direction="direction"
      :before-close="handleClose"
    >
    <!-- 
    :model  表示要绑定的数据  这个表单中的内容
     size: 表示表单的大小
     ref: 表单的对象
     style: 表单的样式
     label-width: 表示标签的宽度
     :rules 表示该表单要进行的验证规则
     -->
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px"
        ref="formRef"
        :rules="xx"
        size="large"
      >
      <!-- 
      prop: 表示要显示的列   也是表单进行验证的列
      v-model: 表示要绑定的数据
      el-input: 表示输入框
       -->
        <el-form-item label="分类标题" prop="category_name">
          <el-input v-model="form.category_name" />
        </el-form-item>

        <el-form-item label="分类缩写" prop="category_alias">
          <el-input v-model="form.category_alias" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(formRef)">添加</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 编辑抽屉 -->
        <el-drawer
      v-model="bianji"
      title="分类编辑~~~"
      :direction="direction"
      :before-close="guanbibianji"
    >
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px"
        ref="formRef"
        :rules="yy"
        size="large"
      >
        <el-form-item label="分类标题" prop="category_name">
          <el-input v-model="form.category_name" />
        </el-form-item>

        <el-form-item label="分类缩写" prop="category_alias">
          <el-input v-model="form.category_alias" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="xiugai(formRef)">确定修改</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import table from "../components/table.vue"

// 引入vue  当中的ref实现双向绑定  onMounted引入生命周期钩子在页面加载之前
import { onMounted, ref } from "vue";//引入onMounted
// 引入接口  去给后端发请求
import { fengleis, fengleisdelete, fengleisadd,fengleisupdate } from "../api/login.js";//引入分类接口
// 引入pinia当中存放的对象
import { cuser } from "../stores/user.js";//引入用户id
import { ElMessage, ElMessageBox } from "element-plus";//引入提示框
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue"; // 引入图标
import { reactive } from "vue";//引入响应式
const formRef = ref(null); //引入ref
//把pinia中存放的对象 引入到当前页面中
const uu = cuser();
// 分页类
const page = ref({
  id: uu.user.id,//用户id
  total: 0,//总页数
  pageNum: 1, //页码
  pageSize: 4, //每页条数
});
//文章分类 列表
const tableData = ref([]);
//获取每页显示几条数据
const handleSizeChange = (a) => {
  // a 为每页显示的条数
  page.value.pageSize = a;
  console.log(`每页 ${a} 条`);
  // 重新获取数据
  into();
};
//添加分类表单
const form = ref({
  category_name: "",
  category_alias: "",
  create_user: 0,
});
//获取当前页码
const handleCurrentChange = (x) => {
  // x 为当前页码
  page.value.pageNum = x;
  console.log(`当前页: ${x}`);
  //
  into();
};
// 获取文章分类列表
const into = async () => {
  console.log(uu);
  const vv = await fengleis(page.value); // 将页码更新到请求参数中
  tableData.value = vv.data.list; // 更新表格数据
  page.value.total = vv.data.total;
};
import {cs} from "../stores/zhuangtai.js";
import { useRouter } from 'vue-router'
const router = useRouter();
const zt=cs()

const shanchu = async (row) => {
  console.log("qwwqeqeqw"+row);
  const res=await fengleisdelete(row);
  if (res.code == 20021) {
    ElMessage({
      type: "success",
      message: res.msg,
    });
  into(); // 重新获取数据
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
 
 
};
// 删除按钮
const deleteRow =  ( row) => {
 console.log("删除"+row);
  ElMessageBox.confirm(
    // 提示用户是否删除
    "删除后数据将无法恢复,是否删除该数据?",
    "确定删除吗?",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning", // 提示类型
    }
  )
    .then(() => {
       shanchu(row);
    })
    .catch(() => {
      
    });
};
const drawer = ref(false); //添加抽屉
const bianji = ref(false); //编辑抽屉
// 关闭按钮(添加分类)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("添加的分类还未保存,确定退出?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    done();
    form.value = {};

  });
};
// 关闭按钮(编辑分类)
const guanbibianji = (done: () => void) => {
  ElMessageBox.confirm("修改的分类还未保存,确定退出?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(() => {
    done();
    form.value = {};
    into();

  });
};

// 添加分类验证规则
const xx = ref({
  category_name: [
    { required: true, message: "请输入分类标题", trigger: "blur" },
    { min: 1, max: 8, message: "分类标题为3~8位", trigger: "blur" },
  ],
  category_alias: [
    { required: true, message: "请输入分类缩写", trigger: "blur" },
    { min: 1, max: 10, message: "分类缩写为3~8位", trigger: "blur" },
    { pattern: /^[A-Za-z]+$/, message: "只能输入英文字母", trigger: "blur" },
  ],
});
const user = cuser();//获取用户id
//添加分类方法
const tianjia = async () => {
  form.value.create_user = user.user.id;
  const result = await fengleisadd(form.value);
  console.log(result);
  if (xx.value) {
    ElMessage({
      type: "success",
      message: "添加成功",
    });
    drawer.value = false; // 关闭抽屉
    into(); // 重新获取数据
    form.value = {};
  } else {
    ElMessage({
      type: "error",
      message: "添加失败，请稍后再试",
    });
  }
};

// 添加分类按钮
const onSubmit = (formRef) => {
  if (formRef) {
    formRef.validate((valid) => {
      if (valid) {
        tianjia(); // 调用添加分类方法
      } else {
        ElMessage({
          type: "error",
          message: "表单验证失败",
        });
      }
    });
  }
};
// 编辑分类验证规则
const yy = ref({
  category_name: [
    { required: true, message: "分类标题", trigger: "blur" },
    { min: 1, max: 8, message: "分类标题为3~8位", trigger: "blur" },
  ],
  category_alias: [
    { required: true, message: "分类缩写", trigger: "blur" },
    { min: 1, max: 16, message: "分类缩写为3~8位", trigger: "blur" },
    { pattern: /^[A-Za-z]+$/, message: "只能输入英文字母", trigger: "blur" },
  ],
});
// 编辑按钮
const dakaibianji = (row) => {
  form.value = row;
  bianji.value = true;
};
//编辑方法
const bianjis =async (row) => {
  form.value.id=row.id;
  const result = await fengleisupdate(form.value);
  console.log(result);
  if (yy.value) {
    ElMessage({
      type: "success",
      message: "编辑成功",
    });
    bianji.value = false; // 关闭抽屉
    into(); // 重新获取数据
  } else {
    ElMessage({
      type: "error",
      message: "编辑失败，请稍后再试",
    });
  }
};
//完成修改按钮
const xiugai = (formRef) => {
 if (formRef) {
    formRef.validate((valid) => {
      if (valid) {
        bianjis(form.value); // 调用添加分类方法
      } else {
        ElMessage({
          type: "error",
          message: "表单验证失败",
        });
      }
    });
  }
};
// 页面加载时执行获取文章分类列表
onMounted(() => {
  if(zt.zhuangtai==""){
    ElMessage({
      message: "请先登录",
      type: "warning",
    });
    router.push("/")
  }
  into();
});
</script>
<style></style>
